import Vue from 'vue'
import component from './load.vue'

// 构造器，创建一个子类，这个子类具有component中的方法属性
const VM = Vue.extend(component)

const load = {
  bind: function (el, binding, vnode) {
    // console.log('bind----------', el, binding, vnode)
    const vm = new VM({
      el: document.createElement('div'),
      propsData: {
        show: binding.value,
        type: 'bubbles',
        size: 8
      }
    })
    el.instance = vm // 将vue实例作为el的一个属性，便于其他回调中使用
    el.vm = vm.$el // vue实例的DOM
    el.style.postion = 'relative'
    el.style.transform = 'translate(0,0)'

    el.appendChild(el.vm)
  },
  inserted: function (el, binding, vnode) {
    // console.log('inserted----------', el, vnode, oldVnode)
  },
  update: function (el, binding, vnode, oldVnode) {
    // console.log('update----------', el.instance)
    el.instance.show = binding.value
    if (binding.value) {
      el.style.postion = 'relative'
      el.style.transform = 'translate(0,0)'
    } else {
      el.style.postion = ''
      el.style.transform = ''
    }
  },
  componentUpdated: function (el, binding) {
    // console.log('componentUpdated----------', el)
  },
  unbind: function (el, binding, vnode) {
    // console.log('unbind----------', el)
  }
}

export default Vue => {
  Vue.directive('load', load)
}
